<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: yansheng 610363806@qq.com
 * @LastEditTime: 2024-07-26 23:49:00
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      :title="formData.product_id ? '编辑' : '新增'"
      placement="right"
        :maskClosable='false'
    :keyboard='false'
      :closable="true"
      width="800"
      v-model:open="showAddDialog"
    >
      <a-form
        ref="formRef"
        :rules="rules"
        :model="formData"
        label-position="top"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-item
          label="产品名称"
          required
          name="product_name"
        >
          <a-input v-model:value="formData.product_name"></a-input>
        </a-form-item>

        <a-form-item
          label="回扣系数"
          required
          name="proportion"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="formData.proportion"
            :max="1"
            :min="0.01"
            :precision="2"
            :step="0.01"
          />
        </a-form-item>
        <a-form-item
          label="产品积分"
          required
          name="product_point"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="formData.product_point"
            :min="1"
            :max="10000000"
          />
        </a-form-item>

        <!-- <a-form-item
          label="是否上架"
          name="is_on"
        >
          <a-switch
            v-model:checked="formData.is_on"
            checked-children="上架"
            un-checked-children="下架"
          />
        </a-form-item> -->

        <a-form-item
          label="介绍"
          required
          name="remark"
        >
          <a-textarea
            v-model:value="formData.remark"
            placeholder="请输入介绍"
            :auto-size="{ minRows: 2, maxRows: 10 }"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="handleCancel">取消</a-button>

          <a-button
            style="margin-left: 20px"
            type="primary"
            @click="handleSubmit"
          >
            确认
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup>
  import { productAdd, productUpdate } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick } from 'vue'

  const emits = defineEmits(['activity-added', 'close'])
  const props = defineProps({
    // showAddDialog: {
    //   type: Boolean,
    //   default: false
    // }
  })
const showAddDialog = ref(false)
  const loading = ref(false)
  const formRef = ref()
  const rules = {
    product_name: [
      {
        required: true,
        message: '请输入产品名称',
        trigger: 'change'
      },
      {
        min: 2,
        max: 50,
        message: '长度2-50字',
        trigger: 'blur'
      }
    ],

    proportion: [
      {
        required: true,
        message: '请输入库存',
        trigger: 'blur'
      }
    ],
    product_point: [
      {
        required: true,
        message: '请输入价格',
        trigger: 'blur'
      }
    ],

    
  }
 
  const formData = ref({
    product_name: '',

    proportion: '',
    product_point: '',
    remark: ''
  })
  const uploadVisible = ref(false)
  const handleSubmit = () => {
    formRef.value.validate().then(() => {
      loading.value = true
      let http = formData.value.product_id ? productUpdate : productAdd

      http(formData.value)
        .then((res) => {
          if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
          if (res.code == 200) {
            showAddDialog.value = false
            emits('success')
            formData.value = {
              product_name: '',

              proportion: '',
              product_point: '',
              remark: ''
            }
          }
        })
        .catch((err) => {
          message.error(err.msg)
        })
        .finally(() => {
          loading.value = false
        })
    })
  }

  const handleCancel = () => {
    showAddDialog.value = false
    emits('close') // Close the dialog
  }
  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
      formRef.value.resetFields()

      if (row) {
        let data = JSON.parse(JSON.stringify(row))
        formData.value = {
          product_name: '',

          product_id: data.product_id,
          product_name: data.product_name,

          proportion: data.proportion,
          product_point: data.product_point,
          remark: data.remark
        }
      } else {
        formData.value = {
          product_name: '',

          proportion: '',
          product_point: '',
          remark: ''
        }
      }
    })
    //
  }
  defineExpose({
    init
  })
</script>

<style scoped></style>
